<template>
  <div class="all">
    <div class="header_top">
      <div class="address" @click="runAddress()">
        <img src="../../assets/定位白@2x.png" alt="" />
        <span class="sides">{{ LocationCity }}</span>
      </div>
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索康护项目"
        left-icon=""
        show-action
        @click="onSearch"
      >
        <template #left-icon>
          <div>
            <van-icon name="search" />
          </div>
        </template>
        <template #action>
        </template>
      </van-search>
      <div style="" @click="clickSao" class="sao">
        <img src="../../assets/扫一扫.png" alt="">
      </div>
    </div>
    <div class="all_content">
      <div class="banner">
        <van-swipe
          class="my-swipe"
          style="width: 100%;"
          height="120"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item v-for="(item, index) in images" :key="index">
            <img :src="item" class="" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="menuMain">
        <ul>
          <li
            v-for="(item, index) in mainMenuList"
            :key="index"
            @click="jump(item.MENU_URL, item)"
          >
            <img :src="item.MENU_ICON" alt="" />
            <span>{{ item.MENU_NAME }}</span>
          </li>
        </ul>
      </div>
      <div class="menu">
        <ul>
          <li
            v-for="(item, index) in menuList"
            :key="index"
            @click="jump(item.MENU_URL, item)"
          >
            <img :src="item.MENU_ICON" alt="" />
            <span>{{ item.MENU_NAME }}</span>
          </li>
          <li @click="clickMore()" v-show="menuList.length > 6">
            <img src="../../assets/更多@2x.png" alt="" />
            <span>全部</span>
          </li>
        </ul>
      </div>
      <div>
<!--        <iframe id="geoPage" width=0 height=0 frameborder=0 style="display:none;" scrolling="no"-->
<!--                src="https://apis.map.qq.com/tools/geolocation?key=T7MBZ-IKNK6-JNMSO-ELKLJ-TG3NK-5VBWQ&referer=kfhl&effect=zoom"></iframe>-->
      </div>
      <div class="video_content">
        <p class="p_header" style="background:#fff;display:flex;justify-content: space-between">
          <span style="display: flex;align-items: center">
            <a class="hengGang"></a>视频教学
          </span>
          <span @click="clickVideo"  style="display: flex;font-size:15px !important;align-items: center;color: #999999;font-weight: 500">
            更多
              <img src="../../assets/更多灰@2x.png" style="width: 7px;height: 13px;margin-right: 15px;margin-left: 5px" alt="">
          </span>
        </p>
        <van-tabs
          v-model="active"
          swipeable
          animated
          color="#1da4f2"
          title-active-color="#1da4f2"
          line-width="15px"
          line-height="2px"
          @click="onClick"
          @change="onchange"
        >
          <van-tab
            v-for="(item, index) in tabList"
            :key="index"
            :title="item.name"
          >
            <div class="content">
              <ul
                class="ulList"
                @click="goPlay(video.VIDEO_URL, video.ID, video.VIDEO_TYPE)"
                v-for="(video, videoIndex) in videoArr"
                :key="videoIndex"
              >
                <li>
                  <img
                    class="videoImg"
                    v-if="video.VIDEO_IMG !== undefined && video.VIDEO_IMG !== ''"
                    :src="video.VIDEO_IMG"
                    alt=""
                  />
                  <img
                    class="videoImg"
                    v-else
                    src="../../assets/康护到家.png"
                    alt=""
                  />
                  <div class="playImg">
                    <img src="../../assets/播放@2x.png" alt="">
                  </div>
                  <p class="playDuration">{{video.VIDEO_DURATION}}</p>
                </li>
                <li class="li_videoBottom">
                  <p class="videoTitle">{{ video.VIDEO_TITLE }}</p>
                  <p class="videoIntro">{{video.VIDEO_INTRO}}</p>
                  <p class="isuser">
                  <span>
                     <img class="isuser_img" :src="video.PHOTO" alt="">
                      {{video.VIDEO_UPLOADER}}
                  </span>
                    <span>
                    <img class="playNumber" src="../../assets/播放量.png" alt="">
                    {{video.VIDEO_CLICKNUM}}</span>
                  </p>
                </li>
              </ul>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="bottom">
      <list-menu :id="userid"></list-menu>
    </div>
    <van-dialog v-model="pwdShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="请输入该模块密码"
                @confirm="pwdConfirm()"
                show-cancel-button>
      <input type="password" id="pwd" class="pwdInp" autofocus v-model="password">
    </van-dialog>
  </div>
</template>

<script>
import imgHttp from '../../http/video.http'
import listMenu from '../../components/Vue/ListMenu'
import { Toast } from 'vant'
import BMap from 'BMap'
import $ from 'jquery'
export default {
  name: 'Home',
  components: { listMenu: listMenu },
  data () {
    return {
      userid: '', // 用户userid
      searchValue: '', // 搜索内容
      bannerImg: '', // 轮播图
      mainMenuList: [], // 主要菜单
      menuList: [], // 次要菜单
      imgHttp: imgHttp.imgHttp, // 图标网址前缀
      address: '',
      tabList: [],
      active: 0,
      videoArr: [],
      LocationCity: '定位中',
      images: [],
      height: 0,
      sys: '',
      loc: '',
      pwdShow: false,
      password: '',
      item: '',
      type: 'tab',
      address_detail: null,
      center: {lng: 116.40387397, lat: 39.91488908}
    }
  },
  mounted () {
    sessionStorage.removeItem('topActive')

    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.sys = this.$utils.getUrlKey('sys')
    if (this.$utils.getUrlKey('token') !== null) {
      var token = this.$utils.getUrlKey('token')
      sessionStorage.setItem('token', token)
    }
    if (this.$utils.getUrlKey('sys') !== null) {
      sessionStorage.setItem('sys', this.sys)
    }
    // 获取轮播图
    this.getBanner()
    // 获取菜单
    this.getMenu()
    // 获取视频分类
    this.getTabList()
    // 获取不同分类的视频
    this.getVideo()
    $('.all_content').css('height', $(window).height() - $('.header_top').height() - 44 + 'px')
    // 获取当前登录信息角色
    this.getInfo()
  },
  created () {
    var city = sessionStorage.getItem('city')
    if (city !== null && city !== undefined) {
      this.LocationCity = city
      sessionStorage.setItem('LocationCity', city)
    } else {
      // 地址
      this.city()
    }
  },
  methods: {
    city () {
      // 定义获取城市方法
      const geolocation = new BMap.Geolocation()
      var _this = this
      geolocation.getCurrentPosition(function getinfo (position) {
        let city = position.address.city // 获取城市信息
        // let province = position.address.province // 获取省份信息
        _this.LocationCity = city
        _this.clickEvent(position)
      }, function (e) {
        _this.LocationCity = '定位失败'
      }, {provider: 'baidu'})
    },
    clickEvent (e) {
      var self = this
      var gc = new BMap.Geocoder()
      var _this = this
      gc.getLocation(e.point, function (rs) {
        var addComp = rs.addressComponents.city
        _this.LocationCity = rs.addressComponents.city
        sessionStorage.setItem('LocationCity', _this.LocationCity)
        // console.log(rs)// 地址信息
      })
    },
    getInfo () {
      this.$http.findPersonal()
        .then(res => {
          console.log(res)
          sessionStorage.setItem('selfInformation', JSON.stringify(res.data))
          sessionStorage.setItem('role', res.data.role)
          sessionStorage.setItem('name', res.data.name)
          sessionStorage.setItem('userid', res.data.userid)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 密码输完确认
    pwdConfirm () {
      this.checkMenuPwd()
    },
    // 密码检验
    checkMenuPwd () {
      this.$http.checkMenuPass({menu_id: this.item.ID, password: this.password})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.password = ''
            if (this.item.MENU_URL.split('/')[0] === ':CLIENT') {
              if (sessionStorage.getItem('sys') === 'ANDROID') {
                var ff = this.item.MENU_URL.split('/')[1]
                window.WebViewJavascriptBridge.callHandler(ff, {'param': ''}, function (responseData) {})
              } else {
                Toast('请在App上使用本功能')
              }
            } else {
              // 跳转1
              window.location.href = this.item.MENU_URL
            }
          } else {
            Toast(res.data.msg)
            this.pwdShow = true
            this.password = ''
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    clickVideo () {
      this.$router.push({path: '/video', query: {userid: this.userid}})
    },
    // Tmap () {
    //   window.addEventListener('message', (event) => {
    //     // var _this = this
    //     if (event.data) {
    //       this.loc = event.data // 接收位置信息
    //       if (this.loc) {
    //         this.LocationCity = this.loc.city
    //         sessionStorage.setItem('LocationCity', this.loc.city)
    //         console.log(this.LocationCity)
    //       }
    //     }
    //   }, false)
    //   // 设置6s超时，防止定位组件长时间获取位置信息未响应
    //   setTimeout(function () {
    //     if (!this.loc) {
    //       console.log('定位超时')
    //     }
    //   }, 6000) // 6s为推荐值，业务调用方可根据自己的需求设置改时间，不建议太短
    // },
    // 点击扫一扫
    clickSao () {
      window.WebViewJavascriptBridge.callHandler('goScan', {'param': ''}, function (responseData) {})
    },
    runAddress () {
      this.$router.push({path: '/city'})
    },
    // 获取不同分类的视频
    getVideo () {
      // http://jmx-kfdj.com/kfhl/miniindex/getIndexVideosByType
      this.$http
        .getIndexVideosByType({ VIDEO_TYPE: this.active + 1 })
        .then(res => {
          console.log(res)
          this.videoArr = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击视频跳转
    goPlay (url, videoId, videoType) {
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videoclick', {params: {ID: videoId}})
      this.$http
        .videoclick({ ID: videoId })
        .then(res => {
          // console.log(res)
          this.videoArr = res.data
          this.$router.push({
            path: '/playVideo',
            query: {
              videoUrl: url, // 视频链接
              videoId: videoId, // 视频id
              videoType: videoType, // 视频类型
              userid: this.userid // JSON.parse(local.get('dataJson')).USER_ID // 用户userid
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取视频分类数据
    getTabList () {
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/getVideoTypes')
      this.$http
        .videoList({})
        .then(res => {
          // this.tabList = res.data
          for (var i = 0; i < res.data.length; i++) {
            var obj = { name: res.data[i].TYPE_NAME, id: res.data[i].ID }
            this.tabList.push(obj)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // // 视频分类点击切换
    onClick (name, title) {
      // this.getVideo()
      // Toast(title)
    },
    onchange () {
      this.getVideo()
    },
    // 点击菜单跳转
    jump (url, item) {
      if (url !== '#') {
        // if (url === '../../../vue_kfhl/#/self?userid=96165bc4f1644a9a83f1dec324b616e7&type=1') {
        //   this.$router.push({path: '/self', query: {'userid': '96165bc4f1644a9a83f1dec324b616e7', 'type': 1}})
        // } else if (url === '../../../vue_kfhl/#/self?userid=96165bc4f1644a9a83f1dec324b616e7&type=2') {
        //   this.$router.push({path: '/self', query: {'userid': '96165bc4f1644a9a83f1dec324b616e7', 'type': 2}})
        // } else
        this.item = item
        this.checkMenuPwd()
        // this.pwdShow = true
      } else {
        Toast('功能正在开发中，敬请期待...')
      }
    },
    // 点击更多
    clickMore () {
      this.$router.push({ path: '/more', query: { userid: this.userid } })
    },
    // 轮播图
    getBanner () {
      //  http://jmx-kfdj.com/kfhl/miniindex/getIndexImgs
      this.$http
        .getIndexImgs()
        .then(res => {
          console.log(res)
          // this.bannerImg = imgHttp.imgHttp + res.data[0].PATH
          for (var i = 0; i < res.data.length; i++) {
            this.images.push(res.data[i].PATH)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取菜单
    getMenu () {
      //  http://jmx-kfdj.com/kfhl/miniindex/getMenus
      this.$http
        .getMenus({})
        .then(res => {
          console.log(res)
          for (var i = 0; i < res.data.length; i++) {
            // 主要菜单
            if (i < 4) {
              this.mainMenuList.push(res.data[i])
            } else if (i < 11) {
              // 次要菜单
              this.menuList.push(res.data[i])
            }
          }
          $('.all_content').css('height', $(window).height() - $('.header_top').height() - 44 + 'px')
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 搜索框
    onSearch () {
      this.$router.push({ path: '/search', query: { userid: this.userid } })
    }
  },
  destroyed () {
    sessionStorage.removeItem('type')
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.p_header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  background: white;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
}
.hengGang{
  display: block;
  width: 2px;
  height: 15px;
  background: #1DA4F2;
  border-radius: 2px;
  margin-right: 8px;
  margin-left: 10px;
}
.all {
  width: 100vw;
  /*height: 100vh;*/
}
.header_top {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  font-family: "PingFang SC";
  background: linear-gradient(90deg, #1da3f2, #1dc7f2);
  position: sticky;
  top: 0;
  z-index: 99;
}
.address {
  margin: 0 5px 0 15px;
  display: flex;
  align-items: center;
}
.address img {
  width: 14px;
  height: 17px;
  margin-right: 5px;
}
.sides{
  width: 50px;
  height: 100%;
  display: block;
  /*background: #fff;*/
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/*搜索*/
/deep/ .van-search--show-action {
  width:64%;
  background: none;
}
/deep/ .van-search .van-cell {
  /*color: #fff;*/
}
/deep/ .van-search__action {
  margin-left: 5px !important;
}
/deep/ .van-icon-search::before {
  content: "\F0AF";
  padding-left: 10px;
}
.sao {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  font-family: "PingFang SC";
  display: flex;
  align-items: center;
}
.sao img{
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.all_content{
  width: 100%;
  overflow: auto;
}
.banner {
  width: 100%;
  /*height: 140px;*/
  display: flex;
  justify-content: center;
  background-image: url("../../assets/homeBackground.png");
  background-repeat: no-repeat;
  background-size: 100% 90%;
  background-position: top;
  padding: 10px 0 5px 0;
}
.banner img {
  width: 92%;
  height: 120px;
  /*padding-top: 10px;*/
}
.menuMain {
  height: 90px;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.menuMain ul {
  width: 95%;
  height: 100%;
  background: rgba(29, 164, 242, 0.1) !important;
  /*background: linear-gradient(90deg, #1DA3F2 , #1DC7F2 );*/
  border-radius: 10px;
  display: flex;
}
.menuMain ul li {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.menuMain ul li img {
  width: 35px;
  height: 35px;
  margin-bottom: 5px;
}
.menu {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.menu ul {
  width: 95%;
  height: 100%;
  background: #fff;
  /*background: linear-gradient(90deg, #1DA3F2 , #1DC7F2 );*/
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.05);
}
.menu ul li {
  width: 25%;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.menu ul li img {
  width: 28px;
  height: 28px;
  margin-bottom: 5px;
}
/*   视频内容*/
.content {
  width: 95%;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  /*position: absolute;*/
}
.ulList{
  width: 49%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.ulList:nth-child(even) {
  margin-left: 1.5%;
}
.ulList:last-child {
  margin-bottom: 30px;
}
.li_videoBottom{
  background: #FFFFFF;
  box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.05);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 5px;
  box-sizing: border-box;
}
.ulList li{
  position: relative;
}
.videoImg {
  width: 100%;
  height: 100px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  margin: 10px 0 0 0;
}
.playImg img{
  width: 20px;
  height: 20px;
  position: absolute;
  top: 45%;
  left: 45%;
}
.playDuration{
  width: 100%;
  height: 20px;
  text-align: right;
  position: absolute;
  bottom: 5px;
  font-size: 11px;
  color: #fff;
  padding-right: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
.time{
  font-size: 11px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 5px;
}
.videoTitle{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.videoIntro{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.isuser{
  font-size: 11px;
  margin-top: 5px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.isuser img {
  margin-right: 5px;
  object-fit: cover;
}
.isuser span{
  display: flex;
  align-items: center;
}
.isuser_img{
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.playNumber{
  width: 13px;
  height: 10px;
}
/deep/ .van-tab__text--ellipsis{
  /*font-weight: bold;*/
  font-family: PingFang SC;
  font-size: 15px;
}
/deep/ .van-tab{
  color: #333333;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /*background-color: #39a9ed;*/
}
  /deep/ .van-tabs__wrap{
    /*border-bottom: 1px solid #E5E5E5;*/
  }
.pwdInp{
  width: 80%;
  height: 40px;
  margin: 20px 10%;
  /*margin: 10px 15%;*/
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #1DA4F2;
  box-sizing: border-box;
}
  .pwdInp:focus{
    border-color: #1DA4F2;
  }
</style>
